<template>
  <view class="pagebox">
    <div class="q_tip">
      <p class="rpx28 app_col">
        * Q26.
        <text class="rpx28 col282">该陈列分厂商分品类的面积（平方米）</text>
      </p>
    </div>

    <div class="chenlie">
      <div class="cl_tip app_col rpx28">
        <p>至少有一个厂商陈列</p>
        <p />
        <p>“陈列的总面积（1.5）”应等于“该陈列分厂商分品类的面积（0）”</p>
        <p />
      </div>

      <div class="c_it" v-for="(it,ind) in collapse[select]" :key="ind">
        <p class="c_title rpx28 col666">{{it.title}}</p>
        <div class="cl_box">
          <picker class="cl_pk" :range="it.cs" @change="bindCSChange($event,ind)">
            <navigator class="cl_sel">
              <p class="c_val omit1 rpx28 col3A4060">{{it.val}}</p>
              <img src="../../static/q2.png" />
            </navigator>
          </picker>
          <picker class="cl_pk" :range="it.fl" @change="bindFLChange($event,ind)">
            <navigator class="cl_sel">
              <p class="c_val omit1 rpx28 colB3B">{{it.val1}}</p>
              <!-- <p class="c_val omit1 rpx28 col3A4060">选择品类</p> -->
              <img src="../../static/q2.png" />
            </navigator>
          </picker>
          <input
            class="q_number rpx328 col3A4060"
            type="number"
            cursor-spacing="10"
            v-model="it.value"
            placeholder="陈列面积"
            placeholder-class="rpx28 colB3B"
          />
        </div>
      </div>

      <div class="add_clbox">
        <navigator class="add_cl">
          <img src="../../static/q3.png" />
          添加厂商陈列
        </navigator>
      </div>
    </div>

    <div style="height: 222upx;"></div>
    <div class="but88box">
      <navigator @click="toNext" class="but88 rpx32 colfff app_bg">下一步</navigator>
    </div>
  </view>
</template>
<script>
import mixins from "@/mixins";
import ntfy from "../../components/ntfy/index.vue";
import uniPopup from "../../components/uni-popup/uni-popup.vue";
export default {
  // mixins: [mixins],
  components: { ntfy, uniPopup /*,uniCollapse,uniCollapseItem*/ },
  data() {
    return {
      type: "",
      collapse: [[
        { title: "厂商陈列1", val: "选择厂商", val1: "选择品类", value: "" },
        { title: "厂商陈列2", val: "选择厂商", val1: "选择品类", value: "" },
        { title: "厂商陈列3", val: "选择厂商", val1: "选择品类", value: "" },
        { title: "厂商陈列4", val: "选择厂商", val1: "选择品类", value: "" },
        { title: "厂商陈列5", val: "选择厂商", val1: "选择品类", value: "" }
      ]],
      question: [],
      shopId: 0,
      catId: 0,
      select:0
    };
  },
  onBackPress() {
    if (this.type !== "") {
      this.type = "";
      return true;
    }
  },
  onLoad(e) {
    let _that = this;
    _that.shopId = e.shopId;
    _that.catId = e.catId;
    _that.select = e.select
    uni.getStorage({
      key:'shopId-'+_that.shopId,
      success: res => {
        _that.question = res.data.sel;
        if (res.data.sel[23].sel_data) {
          _that.collapse = res.data.sel[23].sel_data
        } else {
          _that.getcsfl()
        }
      }
    });

    //处理循环添加数据
    if((+_that.select+1)!= _that.collapse.length){
      uni.getStorage({//Q26
        key: "question",
        success: res => {
          _that.collapse.push([
            { title: "厂商陈列1", val: "选择厂商", val1: "选择品类", value: "" },
            { title: "厂商陈列2", val: "选择厂商", val1: "选择品类", value: "" },
            { title: "厂商陈列3", val: "选择厂商", val1: "选择品类", value: "" },
            { title: "厂商陈列4", val: "选择厂商", val1: "选择品类", value: "" },
            { title: "厂商陈列5", val: "选择厂商", val1: "选择品类", value: "" }
          ])
          this.getcsfl()
        }
      })
    }
  },
  methods: {
    getcsfl(){
      let _that = this;
      let cs = [];
      let csid = [];
      _that.question[23].item.cs.forEach((element, index) => {
        cs.push(element.name);
        csid.push(element.id);
      });
      let fl = [];
      let flid = [];
      _that.question[23].item.fl.forEach((element, index) => {
        fl.push(element.name);
        flid.push(element.id);
      });
      _that.collapse[_that.select].forEach((element, index) => {
        element.cs = cs;
        element.fl = fl;
        element.csid = csid;
        element.flid = flid;
      });
    },
    togglePopup(type) {
      this.type = type;
    },
    toNext() {
      this.question[23].sel_data = this.collapse;
      uni.getStorage({
        key:'shopId-'+this.shopId,
        success:res=>{
          res.data.sel[23].sel_data = this.collapse
          uni.setStorage({
            key:'shopId-'+this.shopId,
            data:res.data
          })
        },
        fail:res=>{
          uni.setStorage({
            key:'shopId-'+this.shopId,
            data:{
              "sel":this.question
            }
          })
        }
      })
      mixins.navigate("q27?shopId="+this.shopId+"&catId="+this.catId+"&select="+this.select);
    },
    bindCSChange(e, index) {
      this.collapse[this.select][index].val = this.collapse[this.select][index].cs[e.target.value];
    },
    bindFLChange(e, index) {
      this.collapse[this.select][index].val1 = this.collapse[this.select][index].fl[e.target.value];
    }
  }
};
</script>

<style scoped>
.chenlie {
  background: #fff;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}
.cl_tip {
  margin: 0 38upx;
  line-height: 50upx;
  padding-top: 30upx;
}
.c_it {
  margin: 0 24upx 0 42upx;
}
.c_title {
  margin: 60upx auto 42upx;
}
.cl_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.cl_pk {
  width: 240upx;
  height: 66upx;
  line-height: 66upx;
  background: rgba(234, 234, 234, 1);
  border-radius: 4upx;
  margin-right: 24upx;
}
.cl_sel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cl_sel img {
  width: 20upx;
  height: 20upx;
  display: block;
  margin-right: 20upx;
}
.c_val {
  max-width: 170upx;
  padding: 0 20upx;
}

.q_number {
  text-align: center;
  width: 128upx;
  height: 60upx;
  background: rgba(234, 234, 234, 1);
  border-radius: 4upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 29upx;
}

.add_clbox,
.add_cl {
  display: flex;
  align-items: center;
  justify-content: center;
}
.add_cl {
  margin: 70upx auto 24upx;
  padding: 0 20upx;
  height: 70upx;
}
.add_cl img {
  width: 32upx;
  height: 22upx;
  display: block;
  margin-right: 18upx;
}

.but88box {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #f7f7f7;
}
.but88 {
  margin: 40upx 32upx 102upx;
  height: 80upx;
  width: unset;
}
</style>